<template>
	<view>
		<Header  :showBack="false" title="首页" bgColor="#ace8f6"></Header>

		<template v-if="!mId">
			<view class="badge-box">
				<image  class="index-badge" src="@/static/index-badge.png" mode=""></image>
				<!-- <view class="badge-box-textbox">
					<view class="badge-box-text1">好朋友</view>
					<view class="badge-box-text2">喝好酒</view>
				</view> -->
			</view>
			<view class="tips-box">
				<text>请扫设备上的二维码进行操作</text>
				<text>成功后即可按量买酒</text>
			</view>
			<view class="scan-box">
				<div class="scan-box-item">
					<image @click="scanHandle" class="scan-box-item-badge" src="../../static/scan-badge.png" mode="">
					</image>
					<text>扫码取酒</text>
				</div>
			</view>
		</template>
		<template v-else>
			<view class="content-box">
				<view class="content-box-bg"></view>
				<view class="content-box-tipsbox">
					<text>机器号：{{mId}}</text>
					<text>{{miNoline}}</text>
					<text style="color: #fff;">电量{{miCCLimit}}</text>
				</view>
				<view class="list-box">
					<view class="list-item list-item-gap1">
						<text class="list-item-title">{{rightWineInfo.prName}}</text>
						<view class="list-item-info">
							<view @click="buyHandle('free',3, rightWineInfo)" class="list-item-info-item"
								:class="selectedIndex == 3?'list-item-info-item-active':''">
								<text>免费试喝</text>
								<text>{{freeDrinkNum}}次机会</text>
							</view>
							<view @click="buyHandle('two',4, rightWineInfo)" class="list-item-info-item"
								:class="selectedIndex == 4?'list-item-info-item-active':''">
								<text>来二两</text>
								<text class="list-item-info-item-text2">100ml</text>
							</view>
							<view @click="buyHandle('custom',5, rightWineInfo)" class="list-item-info-item"
								:class="selectedIndex == 5?'list-item-info-item-active':''">
								<text>自定义酒量</text>
								<text class="list-item-info-item-text2">喝多少取多少</text>
							</view>
						</view>
						<image class="list-item-bg" src="../../static/bottle.png" mode=""></image>
						<text class="list-item-count">{{ getWineCount(rightWineInfo) }}</text>
					</view>
					<view class="list-item list-item-gap2">
						<text class="list-item-title">{{leftWineInfo.prName}}</text>
						<view class="list-item-info">
							<view @click="buyHandle('free',0, leftWineInfo)" class="list-item-info-item"
								:class="selectedIndex == 0?'list-item-info-item-active':''">
								<text>免费试喝</text>
								<text>{{freeDrinkNum}}次机会</text>
							</view>
							<view @click="buyHandle('two',1, leftWineInfo)" class="list-item-info-item"
								:class="selectedIndex == 1?'list-item-info-item-active':''">
								<text>来二两</text>
								<text class="list-item-info-item-text2">100ml</text>
							</view>
							<view @click="buyHandle('custom',2, leftWineInfo)" class="list-item-info-item"
								:class="selectedIndex == 2?'list-item-info-item-active':''">
								<text>自定义酒量</text>
								<text class="list-item-info-item-text2">喝多少取多少</text>
							</view>
						</view>
						<image class="list-item-bg" src="../../static/bottle.png" mode=""></image>
						<text class="list-item-count">{{ getWineCount(leftWineInfo) }}</text>
					</view>
					
				</view>

				<view class="btn-box">
					<view class="btn-box-item">
						<view class="buy-btn" @click="$u.debounce(toOrderConfrimTwo, 200)" :class="selectedIndex > -1 && selectedType=='two' ?'buy-btn-active':''">
							就买这些
						</view>
						<span class="buy-text1">支付完成后，请按键取酒</span>
						<span class="buy-text2">适量饮酒 不可贪杯</span>
						<view class="banner">
							<div class="banner-tipsbox" >
								<image class="banner-badge" src="/static/touch.png" mode=""></image>
								<text class="" >查看广告，获取试喝机会</text>
							</div>
							<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" circular
								:duration="800">
								<swiper-item  @click="toAd(item)" v-for="(item,index) in bannerList" :key="index">
									<view class="swiper-item">
										<image
											:src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.pictureId"
											class="img" mode="aspectFill"></image>
									</view>
								</swiper-item>
							</swiper>
						</view>

					</view>
				</view>
			</view>
		</template>

		<uni-popup ref="newUserPop" type="center" mask-background-color="rgba(0,0,0,0.7)">
			<view class="new-box">
				<view class="new-box-content">
					<image src="../../static/newuser-tips.png" mode=""></image>
					<view class="new-box-textbox">
						<text>恭喜获得试喝机会</text>
						<text>免费品尝</text>
					</view>
				</view>
				<view @click="closeNewPop('get')" class="btn-box"></view>
				<image @click="closeNewPop('close')" class="close-badge" src="@/static/close.png" mode=""></image>
			</view>
		</uni-popup>


		<uni-popup ref="customNumPop" type="center" @change="changePop" mask-background-color="rgba(0,0,0,0.5)">
			<view class="custom-num">
				<view class="custom-num-title">
					自定义酒量
				</view>
				<view class="custom-num-titl2">
					输入您需要的酒量(单位:ml)
				</view>
				<view class="custom-num-gap">
					<u-number-box v-model="buyNum" :min="1" :max="1000" :step="50" ></u-number-box>
				</view>
				<view class="btn-group">
					<view @click="$u.debounce(toOrderConfrim, 500)" class="btn-box">
						确定
					</view>
					<view @click="$u.debounce(buyAllCount, 500)" class="btn-box">
						全购
					</view>
				</view>
				<view @click="closeBuyPop" class="close-box">
					<image src="@/static/close-badge2.png" mode=""></image>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="couponPop" type="center" mask-background-color="rgba(0,0,0,0.5)">
			
			<view class="layer attr-content">
				<view class="top-img-box">
					<div class="top-img-box-titlebox">
						<text class="top-img-box-title">优惠券</text>
						<text class="top-img-box-desc">点击优惠券进行领取</text>
					</div>
					<image @click="closeCouponPop" class="close-img" src="../../static/img/del.png"></image>
				</view>
				
				<view class="coupon-list">
					<scroll-view scroll-y="true" style="height: 620rpx;">
						<block v-for="(item, index) in couponList" :key="index" v-if="item.wxStockId">
							<view class="item" @click.stop="addCoupon(item.wxStockId, index)">
								<image class="cou-img" src="/static/img/coupon_bg.png" mode=""></image>
								<view class="left">
									<text class="price">{{ item.amount / 100 }}</text>
									元
								</view>
								<view class="right">
									<view class="title">{{ item.stockName }} 立减{{ item.amount / 100 }}元</view>
									<view class="tit start">有效期开始：{{ item.startTime }}</view>
									<view class="tit end">有效期结束：{{ item.endTime }}</view>
								</view>
								<view class="label">满{{ item.limit / 100 }}元可用</view>
							</view>
						</block>
					</scroll-view>
				</view>
			</view>
			
			<!-- <view class="zzc" v-show="showCoupon">
				<view v-if="showDailingqu" class="dailingqu" @click.stop="getCoupon"></view>
				<view v-else class="yilingqu" @click.stop="">
					<view v-if="noget" class="noget">
						<view>抱歉</view>
						<view>未获得领取资格</view>
					</view>
					<view v-else class="coupon">
						<view>满{{transactionMinimum/100}}元可用</view>
						<view>￥{{couponAmount/100}}</view>
						<view>已加入卡包，消费时自动抵扣</view>
					</view>
				</view>
							
				<image @click.stop="closeWid" src="../../static/imgs/close.png" mode=""></image>
							
			</view> -->
		</uni-popup>
		
		<uni-popup ref="freePop" type="center" @change="changefreePop"  >
			<view class="free-box">
				<view class="free-box-title">选择试喝券</view>
				<view class="free-list">
					<scroll-view scroll-y="true" style="width: 630rpx;height: 630rpx;">
						<view class="item-box">
							<view  :class="['item',freeDrinkIndex==index?'item-active':'']" @click="changeFreeDrink(item,index)" v-for="(item,index) in freeDrinkList" :key="index">
								 <view style="position: relative;z-index: 5;">
									<view></view>
									<view>{{item.type == 1?'首次注册赠送':'广告赠送'}}</view>
								</view>
								
								<view class="flex-box">
									<view>{{item.createTime}}</view>
									<view class="info">
										<text>试喝{{item.number}}ml</text>
									</view>
								</view>
								<image class="badge-img" src="@/static/img/shihe-badge.png"></image>
							</view>
						</view>
					</scroll-view>
					<view class="btn-group" >
						<view @click="freeDrinkClick" class="btn-box">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<registPop ref="registPop"></registPop>

	</view>
</template>

<script>
	import { reject } from "lodash";
	import commonMinxi from "@/commom/commonMixin.js"
	import registPop from "@/component/registPop";
	import {TENANT_ID } from "@/config.js"
	import logStorage from "../../commom/logStorage";

	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;

	export default {
		data() {
			return {
				openId: uni.getStorageSync("openId"),
				appId: getApp().globalData.appId,
				baseUrl: getApp().globalData.baseUrl,
				bannerList: [],
				mId: getApp().globalData.mId,
				token: uni.getStorageSync("token"),
				buyNum: 0,
				selectedIndex: -1,
				selectedType: "",
				voiceList: {
					free: [
						"/static/mp3/play-free1.m4a",
						"/static/mp3/play-free2.m4a",
					],
					two: [
						"/static/mp3/play-two1.m4a",
						"/static/mp3/play-two2.m4a",
						"/static/mp3/play-two3.m4a",
					],
					custom: [
						"/static/mp3/play-custom1.m4a",
					]
				},
				isPlayFlag: false,
				shopList: [],
				selectedWineInfo: {},
				leftWineInfo: {
					id: "",
					httpPrImgUrl: "",
					prName: "",
					prDescription: "",
					prRetailPrice: "",
					count: 0,
					soltNo: "",
					mId: ""
				},
				rightWineInfo: {
					id: "",
					httpPrImgUrl: "",
					prName: "",
					prDescription: "",
					prRetailPrice: "",
					count: 0,
					soltNo: "",
					mId: ""
				},
				miNoline: "", //在线状态
				miCCLimit: "" ,//电量
				
				couponList:[],
				couponList1:[],
				couponList2:[],
				couponList3:[],
				showCoupon:false,
				showDailingqu:true,
				noget:false,
				couponAmount:0,
				transactionMinimum:0,
				freeDrinkNum: 0,
				firstLoading: true,
				freeDrinkList: [],
				freeDrinkIndex: 0,
				
				couponList: [],
				
			};
		},
		onShow() {
			this.getMachineProduct();
			this.getSetList()
			if(!this.firstLoading){
				this.getNewUserInfo();
			}else {
				this.firstLoading = false;
			}
			
		},
		 onLoad() {
			this.getBannerList();

			//提示新人试喝,popup没法遮挡原生taabr，所以先隐藏
			uni.hideTabBar();

			innerAudioContext.onEnded(() => {
				this.isPlayFlag = false;
			})

		},
		onUnload() {
			//销毁对象
			if (innerAudioContext) {
				try {
					innerAudioContext.pause();
					innerAudioContext.destroy()
					innerAudioContext = null
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		async mounted() {
			this.initData()
		},
		mixins: [commonMinxi],
		components: {
			registPop
		},
		methods: {
			scanHandle() {
				uni.showToast({
					icon: "none",
					title: "请使用微信扫一扫购买"
				})
			},
			getBannerList() {
				this.$http('/common/api/commonData/getTenantPictureList', {
					"condition": {
						"typeFlag": 1,
						"tenantId": uni.getStorageSync('tenantId')
					}
				}, res => {
					this.bannerList = res.data.items
				})
			},
			getNewUserInfo() {
				
				
				return new Promise((resolve,reject) => {
					if(this.token){
						this.$http('/service/api/sellmachine/isFirstTimeUser', {
							f_DId: this.mId,
							appID: this.appId,
							openId: this.openId
						}, res => {
							uni.hideTabBar()
							if(res.data.data?.isFirst){
								let flag = uni.getStorageSync("newUserPopFlag");
								
								if(!flag){
									this.$refs.newUserPop.open()
								}else {
									uni.showTabBar();
								}
								
								resolve(0)
							}else {
								uni.showTabBar();
							}
							
							this.freeDrinkNum = 0;
							
							res.data.data?.content.map(item => {
								this.freeDrinkNum += item.experience;
							})
							
							
						},"POST",err => {
							uni.showTabBar();
						})
					}else {
						uni.showTabBar();
						resolve(0)
					}
				})
				
				
			},
			closeNewPop(type) {
				
				if(type == 'get'){
					uni.showToast({
						icon: "none",
						title: "领取成功"
					})
				}
				
				uni.showTabBar();
				this.$refs.newUserPop.close();
				
				uni.setStorageSync("newUserPopFlag", true)
				
			},
			changePop(e) {
				if (!e.show) {
					//清除数据
					let t = setTimeout(() => {
						this.buyNum = 0;
						this.selectedIndex = -1;

					}, 200)
				}
			},
			changefreePop(e){
				if (!e.show) {
					//清除数据
					let t = setTimeout(() => {
						this.buyNum = 0;
						this.selectedIndex = -1;
						this.freeDrinkIndex = 0;
						this.freeDrinkList = [];
				
					}, 200)
				}
			},
			buyHandle(type, index, info) {
				
				this.selectedType = type;
				
				//播放音乐
				this.randomPalyVioce(type);

				if (type == "free") {

					this.validationLogin({
						success: async () => {
							
							if(!this.freeDrinkNum){
								uni.showToast({
									icon: "none",
									title: "您的试喝机会已用完"
								})
								return
							}
							
							this.selectedIndex = index;
							this.selectedWineInfo = info;
							await this.getList();
							this.$refs.freePop.open()
						},
						regist: () => {
							uni.showToastCallBack({
								icon: "none",
								title: "请先注册哦，注册后获取试喝机会",
								mask: true
							}, () => {
								this.$refs.registPop.open();
							})
						}
					})

				} else if (type == "two") {
					
					this.selectedIndex = index;
					this.selectedWineInfo = info
					this.buyNum = 100;
				} else if (type == "custom") {
					
					this.selectedIndex = index;
					this.selectedWineInfo = info
					this.buyNum = 250;
					this.$refs.customNumPop.open()
				}

			},
			closeBuyPop() {
				this.$refs.customNumPop.close()
			},
			toOrderConfrim(freeInfo = {}) {

				this.validationLogin({
					success: () => {

						let params = {
							type: "",
							buyNum: this.buyNum,
							info: this.selectedWineInfo,
							freeInfo: freeInfo
						}

					},
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})

			},
			toOrderConfrimTwo(freeInfo = {}) {

			
				this.validationLogin({
					success: () => {
			
						if(this.selectedType != 'two'){
							return ;
						}
			
						let params = {
							type: "",
							buyNum: this.buyNum,
							info: this.selectedWineInfo,
							freeInfo: freeInfo
						}
					},
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
			
			},
			buyAllCount(){
				
				this.validationLogin({
					success: () => {
						
						uni.showModal({
							title: "提示",
							content: `您是否确认全部购买"${this.selectedWineInfo.prName}"瓶内${this.selectedWineInfo.count}ml酒水`,
							success: (val) => {
								if(val.confirm){
									
									this.buyNum = this.selectedWineInfo.count
									
									uni.showToastCallBack({
										icon: "none",
										title: "全购添加成功",
										duration: 800
									}, () => {
										let t = setTimeout(() => {
											clearTimeout(t)
											let params = {
												type: "all",  //all全购
												buyNum: this.buyNum,
												info: this.selectedWineInfo
											}
										}, 800)
									})
									
								}
							}
						})
				
				
					},
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
				
				
			},
			randomPalyVioce(type) {

				if (!this.isPlayFlag) {
					let urlList = this.voiceList[type];
					let randomIndex = this.getRandomInt(0, urlList.length - 1);

					console.log(urlList[randomIndex]);

					innerAudioContext.src = urlList[randomIndex];
					innerAudioContext.play();
					innerAudioContext.onPlay(() => {
						this.isPlayFlag = true
						console.log('开始播放');
					});
					innerAudioContext.onError((res) => {
						console.log(res);
						this.isPlayFlag = false
					});
				}

			},
			getImgUrlRes(url) {
				return this.baseUrl + '/file/api/uploadFile/downloadByKey?id=' + url;
			},
			getMachineProduct() {
				if (this.mId) {
					this.$http('/pay/api/product/getProducts?mid=' + this.mId, {
						mid: this.mId
					}, res => {
						if (res.data.products.length > 0) {

							this.shopList = [];
							let tmpList = res.data.products.slice(0, 10);
							tmpList.map(item => {
								this.shopList.push({
									id: item.id,
									httpPrImgUrl: this.getImgUrlRes(item.productImgUrl),
									prName: item.productName,
									prDescription: item.prDescription,
									prRetailPrice: item.price,
									count: item.count,
									soltNo: item.soltNo,
									mId: this.mId
								})
							})

							if (this.shopList[0]) {
								this.leftWineInfo = this.shopList[0];
							}
							if (this.shopList[1]) {
								this.rightWineInfo = this.shopList[1];
							}


						}

					})
				}
			},
			getWineCount(info) {
				if (info.count <= 0) {
					return "已售罄"
				} else {
					return "当前容量：" + info.count + "ml";
				}
			},
			getSetList() {

				if (this.mId && this.token) {
					
					let params = {
						"condition": {
							"miAlias": null,
							"mId": this.mId,
							"miBuyTime": null,
							"msSizeName": null,
							"tenantName": null
						},
						"page": 1,
						"rows": 15,
						"pageSize": 15,
						"pageNum": 1
					}
					this.$http(`/equ/api/machineInfo/list`, params, res => {
						
						console.log("params",params);
						console.log("token",this.token);
						console.log("/equ/api/machineInfo/list", res.data)
						
						logStorage.info("params: " +  JSON.stringify(params));
						logStorage.info("token: " +  this.token);
						logStorage.info("/equ/api/machineInfo/list: " +  JSON.stringify(res.data));
						
						let resData = res.data.items[0]
						this.miNoline = resData.miNoline > 0 ? '在线' : '离线'
						this.miCCLimit = resData.miCCLimit == null || resData.miCCLimit == undefined ? '' : resData
							.miCCLimit + "%"



					}, "POST", err => {
						console.log(err);
					})

				}

			},
			canGetCoupon(){
				return new Promise((resolve,reject) => {
					if(this.token){
						
						this.$http('/service/api/couponStock/getValidCouponStockList?mId=1723819969',{},res=>{
							if(res.data.data.items.length > 0){
								this.couponList = res.data.data.items;
								
								let showFlag = this.couponList.find(item => {
									if(item.wxStockId){
										return item
									}
								})
								
								if(showFlag){
									this.$refs.couponPop.open()
								}
								
							}else{
							}
							resolve(0)
						},'POST',err=>{
							resolve(0)
						})
						
						
						// this.$http('/member/api/weChartCoupon/hasActivity?mId=1723819969',{},res=>{
						// 	if(res.data.value){
						// 		this.showCoupon = true
						// 		this.$refs.couponPop.open()
						// 	}else{
						// 		this.getCouponList();
						// 		this.newGetCouponList()
						// 	}
						// 	resolve(0)
						// },'POST',err=>{
						// 	resolve(0)
						// })
					}else {
						resolve(0)
					}
				})
			},
			getCouponList() {
				this.$http('/member/api/weChartCoupon/couponQuery', {
					"pageSize": 999,
					"pageNum": 1,
					"condition": {
						"openId": this.openId,
						"appId": this.appId,
						"tenantId": TENANT_ID, 
					}
				}, res => {
					res.data.data.forEach((item,index)=>{
						if(item.status == 'SENDED'){
							this.couponList1.push(item)
						}else if(item.status == 'USED'){
							this.couponList2.push(item)
						}else{
							this.couponList3.push(item)
						}
					})
				})
			},
			getCoupon(){
				this.$http('/member/api/weChartCoupon/getActivityCouponStock?mId=1723819969',{},res=>{
					console.log('券打印===>',res)
					if(res.data.message == '未中奖'){
						this.noget = true
						this.showDailingqu = false
					}else{
						this.transactionMinimum = res.data.transactionMinimum
						this.couponAmount = res.data.couponAmount
						// this.openId = 'o_Ljnsvh3DwHy6O3APVSJYEDW-3Q'; //坤哥openId
						// 老接口
						// this.$http(`/member/api/weChartCoupon/coupon?stock_id=${res.data.stockId}&appId=${this.appId}&openId=${this.openId}&mId=1646644893`,{},res=>{
						// 	this.noget = false
						// 	this.showDailingqu = false
						// },'POST',err=>{
						// 	console.log(err)
						// 	this.noget = true
						// 	this.showDailingqu = false
						// })
						// 新接口
						this.linquCoupon(res.data.stockId)
					}
				})		
			},
			linquCoupon(wxStockId){
				this.$http('/service/api/couponStock/addCoupon',{
					"wxStockId":wxStockId,
					"openId": this.openId,
					"appId": this.appId,
					"mId":"1646644893",
				},res=>{
					this.noget = false
					this.showDailingqu = false
				},'POST',err=>{
					console.log(err)
					this.noget = true
					this.showDailingqu = false
				})
			},
			newGetCouponList(type=1){
				this.$http('/service/api/couponStock/getCouponList',{
					"condition": {
						"openId": this.openId,
						"appId": this.appId,
						"tenantId": TENANT_ID,
						"mode": 2,
						"usedFlag": type
					},
					"pageSize": 999,
					"pageNum": 1,
				}, res =>{
					if (res.data.statusCode == 200 && res.data.data.items.length > 0) {
						let arr = res.data.data.items.filter(col=>col.statusFlag !=3).map((items) => ({
							...items,
							startTime: items.startTime.slice(0, items.startTime.length - 3),
							endTime: items.endTime.slice(0, items.endTime.length - 3),
							effective: new Date(items.endTime.replace(/-/g,"/")).getTime() > Date.parse(new Date())? true : false
						}));
						this.couponList = this.couponList.concat(arr);
						if(type==3){
							this.couponList = this.couponList.filter(item=>!item.effective)
						}
					}
				})
			},
			async initData() {
				await this.canGetCoupon();
				await this.getNewUserInfo();
			},
			getList(){
				return new Promise((resolve,reject) => {
					this.flag = false
					
					this.$http('/service/api/sellmachine/trialDrinkingRecord',{
						openId: this.openId,
						f_DId: this.mId,
						appID: this.appId,
						isUse: false //isUse 是true是已核销，false是未核销
					},res=>{
						resolve(0)
						
						console.log("res.data.data", res.data.data);
						
						this.freeDrinkList = res.data.data
						
					},"POST",err => {
						resolve(0)
					})
				})
			},
			changeFreeDrink(item,index) {
				this.freeDrinkIndex = index;
			},
			freeDrinkClick(){
				
				let freeInfo = this.freeDrinkList[this.freeDrinkIndex];
				
				this.validationLogin({
					success: () => {
				
						let params = {
							type: "free",
							buyNum: this.buyNum,
							info: this.selectedWineInfo,
							freeInfo: freeInfo
						}
					},
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
				
				
			},
			addCoupon(wxStockId,index) {
				
				if(this.mId){
					this.$http('/service/api/couponStock/addCoupon', {
						wxStockId,
						openId: this.openId,
						appId: getApp().globalData.appId,
						mId: this.mId
					}, res => {
						if (res.data.statusCode == 200) {
							uni.showToast({
								title: '领取成功！',
								icon: 'none'
							});
							
							this.couponList.splice(index,1)
							
						} else {
							uni.showToast({
								title: res.data.errors,
								icon: 'none'
							});
							
						}
					},"POST",err => {
						uni.showToast({
							title: err.data.errors,
							icon: 'none'
						});
					})
				}else {
					uni.showToastCallBack({
						icon: "none",
						title: "请扫码机器二维码后领取",
						mask: true,
						duration: 2000
					}, () => {
						this.$refs.couponPop.close()
					})
					
					
					
				}
				
			},
			closeCouponPop(){
				this.$refs.couponPop.close()
			},
			toAd(item){
				uni.navigateTo({
					url: "/pages/ad/ad?data=" + encodeURIComponent(JSON.stringify(item))
				})
				// this.adInfo = item;
				// this.adShow = true;
				// uni.hideTabBar();
				
			},
			

		},


	}
</script>

<style lang="scss" scoped>
	.badge-box {
		margin-top: 36rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.index-badge {
			width: 520rpx;
			height: 720rpx;
		}

		.badge-box-textbox {
			display: flex;
			position: absolute;
			justify-content: center;
			bottom: 150rpx;
			color: #fff;

			.badge-box-text1 {
				width: 1em;
				margin-right: 8rpx;
				margin-left: 8rpx;
			}

			.badge-box-text2 {
				margin-top: 30rpx;
				width: 1em;
				margin-right: 8rpx;
				margin-left: 8rpx;
			}
		}

	}


	.tips-box {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;

	}

	.scan-box {
		margin-top: 60rpx;
		width: 750rpx;
		display: flex;
		justify-content: center;

		.scan-box-item {
			width: 670rpx;
			height: 348rpx;
			background: #fff;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.scan-box-item-badge {
				margin-top: 30rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
			}

			text {
				margin-top: 36rpx;
				font-size: 32rpx;
				font-weight: 800;
			}

		}
	}


	.content-box {
		position: relative;

		.content-box-bg {
			width: 750rpx;
			height: 155rpx;
			background: #ace8f6;
			color: #fff;
			padding: 210rpx 60rpx 75rpx;
			position: absolute;
			border-radius: 0 0 40rpx 40rpx;
			top: 0;
		}

		.content-box-tipsbox {
			display: flex;
			justify-content: center;
			font-size: 24rpx;
			color: #fff;
			position: relative;
			z-index: 5;

			text {
				margin: 0 24rpx;
			}
		}

		.list-box {
			width: 750rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.list-item {
				margin-top: 22rpx;
				flex: 1;
				display: flex;
				position: relative;
				height: 810rpx;
				flex-direction: column;
				align-items: center;

				.list-item-title {
					font-size: 34rpx;
					color: #fff;
					font-weight: 900;
				}

				.list-item-bg {
					width: 245rpx;
					height: 735rpx;
					position: absolute;
					top: 65rpx;
				}

				.list-item-count {
					margin-top: 50rpx;
					font-size: 24rpx;
					color: #d3ca64;
				}

				.list-item-info {
					margin-top: 272rpx;
					display: flex;
					flex-direction: column;
					position: relative;
					z-index: 5;

					.list-item-info-item {
						margin-bottom: 26rpx;
						width: 255rpx;
						height: 120rpx;
						background-color: rgba(255, 255, 255, 0.8);
						border-radius: 14rpx;
						font-weight: 900;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;

						.list-item-info-item-text2 {
							font-size: 24rpx;
							color: #CCCCCC;
						}

					}

					.list-item-info-item-active {
						background-color: #ace8f6;
						color: #fff;
					}

				}

			}

			.list-item-gap1 {
				box-sizing: border-box;
				padding-left: 40rpx;
			}

			.list-item-gap2 {
				box-sizing: border-box;
				padding-right: 40rpx;
			}

		}


		.btn-box {
			margin-top: 80rpx;
			width: 750rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn-box-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 690rpx;
				height: 434rpx;
				background-color: #fff;
				border-radius: 14rpx;
				position: relative;

				.buy-btn {
					position: absolute;

					text-align: center;
					line-height: 80rpx;
					font-size: 34rpx;
					width: 334rpx;
					height: 80rpx;
					border-radius: 40rpx;
					background-color: #CCCCCC;
					color: #fff;
					top: -40rpx;
				}

				.buy-btn-active {
					background-color: #ace8f6;
				}

				.buy-text1 {
					margin-top: 54rpx;
					font-size: 26rpx;
					color: #CCCCCC;
				}

				.buy-text2 {
					margin-top: 14rpx;
					font-size: 36rpx;
					color: #D69490;
				}

			}

		}


	}

	.banner {
		margin-top: 14rpx;
		width: 600rpx;
		height: 250rpx;
		border-radius: 20upx;

		overflow: hidden;
		position: relative;
		z-index: 99;
		.banner-tipsbox{
			display: flex;
			flex-direction: row;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 50;
			padding: 10rpx 30rpx 10rpx 40rpx;
			border-radius: 12rpx;
			background-color: rgba(0, 0, 0, 0.6	);
			color: #fff;
			
			image{
				width: 42rpx;
				height: 42rpx;
				transform: rotate(-45deg);
				 animation: myTouch 3s infinite;
				 position: absolute;
				 top: 10rpx;
				 left: 5rpx;
			}
			text{
				margin-left: 16rpx;
			}
		}
		.swiper {
			width: 600rpx;
			height: 250rpx;

			.swiper-item {
				width: 600rpx;
				height: 250rpx;
				border-radius: 20upx;

				.img {
					width: 600rpx;
					height: 250rpx;
					border-radius: 20upx;
				}
			}
		}
	}

	.new-box {
		width: 600rpx;
		height: 780rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.new-box-content {
			width: 600rpx;
			height: 700rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 600rpx;
				height: 700rpx;
				position: absolute;
			}

			.new-box-textbox {
				margin-top: 120rpx;
				display: flex;
				flex-direction: column;
				position: relative;
				justify-content: center;
				text-align: center;
				z-index: 5;
				font-size: 28rpx;
				font-weight: 800;
				color: #E55127;
			}
		}
		
		.btn-box{
			width: 296rpx;
			height: 112rpx;
			position: absolute;
			bottom: 160rpx;
			background-color: rgba(0, 0, 0, 0);
		}

		.close-badge {
			width: 60rpx;
			height: 60rpx;
		}
	}


	.perssiom-info-box {
		width: 750rpx;
		display: flex;
		justify-content: center;
		background-color: #fff;
		height: 600rpx;
		border-radius: 23rpx 23rpx 0 0;

		.perssiom-info {
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.perssiom-info-title {
				width: 690rpx;
				display: flex;
				justify-content: center;
				padding-bottom: 16rpx;
				font-size: 32rpx;
				font-weight: 900;
				border-bottom: 1rpx solid #e7e7e7;
			}

			.perssiom-info-content {
				margin-top: 22rpx;
				font-size: 24rpx;
			}

			.perssiom-info-group {
				margin-top: 32rpx;
				display: flex;
				align-items: center;
			}

		}

		.bind-box {
			width: 750rpx;
			height: 750rpx;
		}

	}

	.custom-num {
		width: 630rpx;
		height: 330rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		border-radius: 10rpx;
		position: relative;

		.custom-num-title {
			padding: 30rpx 0;
			font-size: 24rpx;
			color: #B1B1B1;
		}

		.custom-num-titl2 {
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #333;
		}

		.custom-num-gap {
			margin-top: 30rpx;
		}

		.btn-group {
			margin-top: 30rpx;
			display: flex;
			justify-content: center;

			.btn-box {
				color: #fff;
				text-align: center;
				line-height: 60rpx;
				width: 240rpx;
				margin: 0 15rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background: linear-gradient(to right, #F72F18, #FA6018);
			}
		}

		.close-box {
			position: absolute;
			top: 20rpx;
			right: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

	}
	
	
	.zzc {
		display: flex;
		flex-direction: column;
			>view.phone {
				width: 80%;
				height: 300upx;
				background-color: #FFFFFF;
				position: absolute;
				top: 30%;
				left: 50%;
				transform: translate(-50%);
				text-align: center;
				border-radius: 8upx;
	
				>view:first-child {
					height: 200upx;
					box-sizing: border-box;
					line-height: 200upx;
					font-size: 24upx;
	
					>text {
						color: #007AFF;
					}
				}
	
				>view:last-child {
					height: 100upx;
					line-height: 100upx;
					border-top: 1upx solid #C0C0C0;
					font-size: 28upx;
				}
			}
			.dailingqu{
				width: 375upx;
				height: 500upx;
				// background-image: url(../../static/imgs/dailingqu.png);
				background-size: 100% 100%;
			}
			.yilingqu{
				
				width: 375upx;
				height: 500upx;
				color: #333;
				// background-image: url(../../static/imgs/yilingqu.png);
				background-size: 100% 100%;
				>.noget{
					width: 100%;
					height: 100%;
					text-align: center;
					color: #DD524D;
					>view:first-child{
						font-size: 38upx;
						margin-top: 100upx;
					}
					>view:last-child{
						font-size: 28upx;
						margin-top: 20upx;
					}
				}
				>.coupon{
					width: 100%;
					height: 100%;
					text-align: center;
					color: #DD524D;
					>view:first-child{
						font-size: 38upx;
						margin-top: 100upx;
					}
					>view:nth-child(2){
						font-size: 80upx;
						font-weight: 600;
					}
					>view:last-child{
						font-size: 22upx;
						margin-top: 20upx;
						margin-top: 150upx;
						color: #F0AD4E;
					}
				}
			}
			>image{
				width: 70upx;
				height: 70upx;
				position: absolute;
				left: 50%;
				bottom: -100rpx;
				margin-left: -30upx;
			}
		}
		
		
		.free-box{
			width: 660rpx;
			background-color: #fff;
			border-radius: 13rpx;
			box-sizing: border-box;
			padding:15rpx 15rpx 30rpx 15rpx;
			display: flex;
			flex-direction: column;
			.free-box-title{
				display: flex;
				flex-direction: row;
				justify-content: center;
				font-size: 30rpx;
				color: #333;
				padding: 30rpx;
				font-weight: 800;
				border-bottom: 1px solid #e6e6e6;
				
			}
			
			.free-list{
				width: 630rpx;
				margin-top: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.item-box{
					
				}
				.item{
					width: 590rpx;
					margin: 0 auto;
					background-color: #FFFFFF;
					border-radius: 13rpx;
					margin-bottom: 20upx;
					position: relative;
					border: 1px solid #e6e6e6;
					
					.badge-img{
						width: 90rpx;
						height: 90rpx;
						position: absolute;
						top: 10rpx;
						left: 16rpx;
						transform: rotate(-30deg);
					}
					
					scroll-view{
						width: 710upx;
						margin: 0 auto;
						background-color: #F2F2F2;
						height: 160upx;
						border-radius: 10upx;
						view.images{
							display: flex;
							align-items: center;
							height: 100%;
							padding-left: 25upx;
							>image{
								width: 110upx;
								height: 110upx;
								margin-right: 25upx;
								flex-shrink:0;
							}
							
				
							
						}
						
					
						
					}
					>view:first-child{
						width: 100%;
						display: flex;
						justify-content: space-between;
						height: 90upx;
						line-height: 90upx;
						font-size: 28upx;
						color: #333333;
						font-weight: 300;
						box-sizing: border-box;
						padding: 0 20upx;
						align-items: center;
				
						>view{
							height: 90upx;
							line-height: 90upx;
						}
					}
					.flex-box{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26upx;
						padding: 0 20upx;
						.info{
							// width: 100%;
							height: 90upx;
							line-height: 90upx;
							color: #333333;
							font-weight: 300;
							text-align: right;
							font-size: 26upx;
							box-sizing: border-box;
							padding-right: 20upx;
							>text{
								font-weight: 600;
							}
						}
					}
					
					.btn{
						width: 100%;
						height: 90upx;
						line-height: 90upx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						color: #333333;
						font-weight: 300;
						font-size: 26upx;
						>view{
							width: 150upx;
							height: 56upx;
							line-height: 56upx;
							border-radius: 28upx;
							text-align: center;
							border: 1px solid #999999;
							margin-right: 20upx;
							overflow: auto;
						}
					}
				}
				
				.item-active{
					border: 2px solid red;
				}
			
				.btn-group {
					margin-top: 30rpx;
					display: flex;
					justify-content: center;
				
					.btn-box {
						color: #fff;
						text-align: center;
						line-height: 70rpx;
						width: 240rpx;
						margin: 0 15rpx;
						height: 70rpx;
						border-radius: 35rpx;
						background: linear-gradient(to right, #F72F18, #FA6018);
					}
				}
				
			}
			
		}
		
		
	.layer {
		min-height: 40vh;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 0 20rpx 20rpx;
		.top-img-box {
			height: 100rpx;
			position: relative;
			margin: 0 30rpx 10rpx;
			.top-img-box-titlebox{
				display: flex;
				height: 100rpx;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				.top-img-box-title{
					font-size: 28rpx;
					font-weight: 900;
				}
				
				.top-img-box-desc{
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #C0C0C0;
				}
			}
			
			.close-img {
				width: 46rpx;
				height: 46rpx;
				position: absolute;
				right: -20rpx;
				top: 20rpx;
			}
		}
	
		.coupon-list {
			width: 650rpx;
			// height: 192rpx;
			
			.item {
				position: relative;
				margin-bottom: 30rpx;
				color: #fb5830;
				height: 180rpx;
				.cou-img {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 180rpx;
					z-index: 10;
				}
				.left {
					position: absolute;
					width: 250rpx;
					height: 180rpx;
					z-index: 20;
					left: 0;
					top: 0;
					line-height: 180rpx;
					text-align: center;
					.price {
						font-size: 80rpx;
						font-weight: bold;
						margin-right: 8rpx;
					}
				}
				.right {
					width: 420rpx;
					height: 180rpx;
					position: absolute;
					right: 0;
					top: 0;
					z-index: 20;
					display: flex;
					justify-content: center;
					flex-direction: column;
					padding-left: 40rpx;
					.title {
						font-size: 32rpx;
						font-weight: bold;
					}
					.tit {
						font-size: 20rpx;
					}
					
				}
				.label {
					position: absolute;
					right:0;
					top: 0;
					background: #fa5733;
					color: #fff;
					z-index: 30;
					font-size: 16rpx;
					padding: 6rpx 16rpx;
					border-radius: 0 16rpx 0 16rpx;
				}
			}
		}
		.btn {
			height: 66rpx;
			line-height: 66rpx;
			border-radius: 100rpx;
			background: #fa436a;
			font-size: 30rpx;
			color: #fff;
			margin: 30rpx auto 20rpx;
		}
	}
	
	
	
	@keyframes myTouch {
		
		0%{
			width: 30rpx;
			height: 30rpx;
		}
		5%{
			width: 32rpx;
			height: 32rpx;
		}
		10%{
			width: 34rpx;
			height: 34rpx;
		}
		15%{
			width: 36rpx;
			height: 36rpx;
		}
		20%{
			width: 38rpx;
			height: 38rpx;
		}
		25%{
			width: 40rpx;
			height: 40rpx;
		}
		30%{
			width: 42rpx;
			height: 42rpx;
			top: 8rpx;
		}
		35%{
			width: 44rpx;
			height: 44rpx;
			top: 7rpx;
		}
		40%{
			width: 46rpx;
			height: 46rpx;
			top: 6rpx;
		}
		45%{
			width: 44rpx;
			height: 44rpx;
			top: 7rpx;
		}
		50%{
			width: 42rpx;
			height: 42rpx;
			top: 8rpx;
		}
		55%{
			width: 40rpx;
			height: 40rpx;
			top: 7rpx;
		}
		60%{
			width: 38rpx;
			height: 38rpx;
			top: 8rpx;
		}
		
		65%{
			width: 36rpx;
			height: 36rpx;
		}
		70%{
			width: 34rpx;
			height: 34rpx;
		}
		75%{
			width: 32rpx;
			height: 32rpx;
		}
		80%{
			width: 36rpx;
			height: 36rpx;
		}
		85%{
			width: 38rpx;
			height: 38rpx;
		}
		90%{
			width: 40rpx;
			height: 40rpx;
		}
		95%{
			width: 38rpx;
			height: 38rpx;
		}
		100%{
			width: 36rpx;
			height: 36rpx;
		}
		
	}
		
		
</style>